<template>
  <div class="lcd-online-list">
    <div class="lcd-ol-search">
      <AForm layout="inline" :model="search" @finish="query">
        <AFormItem label="名称" name="name">
          <AInput v-model:value="search.name"/>
        </AFormItem>
        <AFormItem label="表名" name="tableName">
          <AInput v-model:value="search.tableName"/>
        </AFormItem>
        <AButton type="primary" @click="query">查询</AButton>
        <AButton @click="add" style="margin-left: 5px">新增</AButton>
        <AButton @click="gen" style="margin-left: 5px">生成</AButton>
      </AForm>
    </div>
    <div class="icd-ol-list">
      <ATable size="small" :bordered="true" :columns="columns" :row-selection="rowSelection"
              :pagination="pagination" :data-source="source" rowKey="id" :loading="false">
        <template #action="{record}">
          <ATag class="lcd-ol-tag" color="#87d068" @click="() => design(record)">表单设计</ATag>
          <ATag class="lcd-ol-tag" color="#108ee9" @click="() => design(record)">表编辑</ATag>
        </template>
      </ATable>
    </div>
  </div>
</template>

<script>
import {ref, reactive} from "vue";

export default {
  name: "index",
  setup() {
    let source = ref([
      {id: 1, name: '用户管理', tableName: 'user', primary: 'id', remark: '用户管理功能', entityName: 'User'}
    ])
    let columns = ref([
      {title: '功能名称', dataIndex: 'name', align: 'center'},
      {title: '表名', dataIndex: 'tableName', align: 'center'},
      {title: '实体名', dataIndex: 'entityName', align: 'center'},
      {title: '主键', dataIndex: 'primary', align: 'center'},
      {title: '功能说明', dataIndex: 'remark', align: 'center'},
      {title: '操作', dataIndex: 'action', align: 'center', slots: {customRender: 'action'}},
    ])
    let search = reactive({
      name: null,
      tableName: null
    })
    let pagination = reactive({})
    let rowSelection = reactive({})

    return {pagination, rowSelection, source, columns, search}
  },
  methods: {
    add() {
      this.$router.push('/lcd/design')
    },
    gen() {

    },
    query() {

    },
    design(record) {
      this.$router.push('/lcd/design?id='+record.id)
    }
  }
}
</script>

<style scoped>
.lcd-online-list {
  padding: 0px 24px;
}
.lcd-ol-search {
  padding: 6px 0px;
}
.lcd-ol-tag {
  cursor: pointer;
}
</style>